<template>
  <div style="background-color: #f5f5f5; min-height: 100vh;">
    <div class="class-layout">
      <!-- 头版区域 -->
      <header class="header" :style="{ backgroundImage: `url(${classData?.cover})` }">
        <div class="overlay"></div>
        <div class="header-content">
          <div class="class-info" v-if="classData">
            <div>
              <h1>{{ classData.semester_name }}</h1>
              <div>
                <div class="info-row">
                  <p>课程号: {{ classData.semester_id }}</p>
                  <p>课堂人数: {{ classData.stu_cnt }}</p>
                  <p>访问次数: {{ classData.visit_cnt }}</p>
                </div>
                <div
                  class="avatar-container"
                  style="display: flex; align-content: flex-end; align-items: center; margin-top: 5px"
                >
                  <img :src="classData.img_url" alt="头像" class="avatar" />
                  <p style="color: white; margin-left: 10px">{{ classData.username }}（{{ classData.university_name }}）</p>
                </div>
              </div>
            </div>
            <div style="margin-left: 20%; position: relative;">
              <a style="color: white; font-weight: bold">课堂码:</a>
              <a style="color: #FED218; font-weight: bold">{{ classData.semester_code }}</a>
            </div>
          </div>
          <div v-else>加载中...</div>
        </div>
      </header>

      <!-- 侧边栏与操作面板 -->
      <div class="main-container">
        <transition name="slide-fade">
          <S_ClassSidebar :classId="classData?.semester_id" :sidebarWidth="sidebarWidth" />
        </transition>
        <main
          :class="['content', { 'no-padding': noPaddingRoutes.includes(currentRouteName) }]"
          style="min-height: 50vh"
        >
          <router-view :classId="classId" />
        </main>
      </div>
    </div>
  </div>
</template>

<script>
import S_ClassSidebar from "@/components/S_ClassSidebar.vue";
import { ref, onMounted, watch, computed } from 'vue';
import { useRoute } from "vue-router";
import { StufetchClassDetails } from "@/services/api";

export default {
 name: "S_ClassLayout",
  components: {
    S_ClassSidebar
  },
  setup() {
    const route = useRoute();
     const noPaddingRoutes = ['StuData'];
    const currentRouteName = computed(() => route.name || '');
    const classId = route.params.id;
    const stuId = localStorage.getItem("id");
    const classData = ref(null);
    const showDropdown = ref(false); // 控制下拉菜单的显示
    const sidebarWidth = ref('240px'); // 默认宽度为240px

    const loadClassDetails = async () => {
      try {
        const response = await StufetchClassDetails(classId, stuId);
        if (response.data.status === 1) {
          classData.value = response.data.data;
          
          // 将 identity 存储到 localStorage
          if (classData.value.identity !== undefined && classData.value.identity !== null) {
            localStorage.setItem("identity", classData.value.identity);
            console.log("identity"+classData.value.identity);
          } else {
            localStorage.removeItem("identity"); // 如果 identity 不存在，则移除
          }
        } else {
          console.error("获取课堂细节失败:", response.data.msg);
        }
      } catch (error) {
        console.error("加载课堂详情失败:", error.response ? error.response.data : error.message);
      }
    };

    onMounted(() => {
      loadClassDetails();
    });

    // 监听 route.params.id 的变化以重新加载课堂详情
    watch(
      () => route.params.id,
      (newId, oldId) => {
        if (newId !== oldId) {
          loadClassDetails();
        }
      }
    );

    // 判断是否是页面
    watch(() => route.path, (newPath) => {
      if(newPath.includes('StuResources')|| newPath.includes('StuResourceViewer')) {
        sidebarWidth.value = '100px';  // 收缩侧边栏到 100px
      } else {
        sidebarWidth.value = '240px';  // 恢复侧边栏宽度
      }
    });

    const editClass = () => {
      // 编辑课堂的逻辑
      console.log("编辑课堂");
    };
    
    const copyClass = () => {
      // 复制课堂的逻辑
      console.log("复制课堂");
    };
    
    const deleteClass = () => {
      // 删除课堂的逻辑
      console.log("删除课堂");
    };

    return {
      classData,
      showDropdown,
      editClass,
      copyClass,
      deleteClass,
      classId,
      sidebarWidth,
      noPaddingRoutes,
      currentRouteName
    };
  }
};
</script>

<style scoped>
.content.no-padding {
  padding: 0 !important;      /* 去掉内边距 */
  background: transparent;    /* 如需去掉白底可加这一行 */
}
/* 动画效果：侧边栏收缩 */
.sidebar {
  transition: width 0.3s ease;
}

.dropdown-menu {
  width: 90px;
  position: absolute;
  margin: 5px 140px;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdown-menu a {
  display: block;
  padding: 10px; /* 菜单项的内边距 */
  color: black; /* 菜单项颜色 */
  text-decoration: none; /* 去掉下划线 */
}

.dropdown-menu a:hover {
  background-color: #f0f0f0; /* 悬停时的背景颜色 */
}

.guanli{
  color: white; 
  cursor: pointer;
}
.guanli:hover {
  color: blue; /* 鼠标悬停时变为蓝色 */
}

.class-layout {
  display: flex;
  flex-direction: column; /* 头版独占一行 */
  width: 80%;
  margin-left: 10%;
  padding-bottom: 20px; /* 添加底部间距 */
}

/* 头部样式 */
.header {
  background-color: white;
  padding: 30px 40px;
  background-size: cover; /* 设置背景图铺满 */
  background-repeat: no-repeat; /* 背景不重复 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 20px 0px;
  border-radius: 10px;
  color: white; /* 文本颜色可以根据背景色调整 */
  position: relative; /* 需要设置 position 为 relative */
}

.overlay {
  position: absolute; /* 绝对定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* 黑色背景，带透明度 */
  backdrop-filter: blur(5px); /* 添加模糊效果 */
  z-index: 1; /* 确保覆盖层在背景上方 */
  border-radius: 10px;
}

.header-content {
  position: relative; /* 确保内容在 overlay 之上 */
  z-index: 2; /* 确保内容在 overlay 之上 */
  display: flex;
  align-items: center;
  width: 100%;
}

.class-info {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

.avatar-container {
  margin-right: 10px; /* 头像和文本之间的间距 */
}

.avatar {
  width: 60px; /* 头像宽度 */
  height: 60px; /* 头像高度 */
  border-radius: 50%; /* 圆形 */
  object-fit: cover; /* 保持头像比例 */
}

.class-info h1 {
  font-size: 22px;
  margin: 0;
  font-weight: bold;
}

.class-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.info-row {
  display: flex;
  flex-wrap: wrap; /* 在小屏幕上换行 */
  gap: 10px; /* 列之间的间距 */
}
.info-row p {
  color: rgba(255, 255, 255, 0.644);
  font-size: 13px;
}

/* 主体部分：侧边栏与内容区域 */
.main-container {
  display: flex;
  flex-grow: 1;
  width: 100%;
  margin-bottom: 60px; /* 添加顶部间距 */
}

/* 内容面板样式 */
.content {
  flex-grow: 1;
  padding: 20px;
  background-color: white;
  overflow-y: auto;
  margin-left: 20px;
  border-radius: 10px;
  width: 60%;
  margin-top: 3px;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }
}
</style>
